<template>
  <div>
    <h1>政策法规详情</h1>
    <h2>{{ article.title }}</h2>
    <p>发布日期：{{ article.publishDate }}</p>
    <p>摘要：{{ article.summary }}</p>
    <div v-html="article.content"></div>
    <div v-if="article.attachment">
      <p>附件：<a :href="`/attachments/${article.attachment}`" download>{{ article.attachment }}</a></p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Mock from 'mockjs';
import { useRoute } from 'vue-router';

export default {
  data() {
    return {
      article: {}
    };
  },
  created() {
    this.fetchArticle();
  },
  methods: {
    fetchArticle() {
      const id = this.$route.params.id;
      // 使用 Mock.js 模拟接口数据
      const data = Mock.mock({
        'article': {
          'id|+1': id,
          title: '@title(5, 10)',
          publishDate: '@date("yyyy-MM-dd")',
          summary: '@sentence(10, 20)',
          content: '@paragraph(3, 5)',
          attachment: '@pick(["附件1.pdf", "附件2.docx", "附件3.xlsx"])'
        }
      });
      this.article = data.article;
    }
  }
};
</script>

<style scoped>
h1 {
  margin-bottom: 20px;
}

h2 {
  margin-bottom: 10px;
}

a {
  color: blue;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}
</style>